<template>
  <el-card>
    <div slot="header">
      <div style="display: inline-block; line-height: 45px;">
        <span style="font-size: 18px; font-weight: 600; color: rgb(73, 80, 96);">Contest DashBoard</span>
      </div>
    </div>
    <div>
      <h2>{{ model.title }}</h2>
      <my-markdown :content="model.ext" class="markdown-body"></my-markdown>
    </div>
  </el-card>
</template>

<script>
import {getContestDetail} from '@/network/contest';
import MyMarkdown from "@/components/common/markdown/MyMarkdown";

export default {
  components: {MyMarkdown},
  mounted() {
    this.init()
  },
  data() {
    return {
      model: {
        contestId: '',
        title: '',
        type: '',
        startTime: '',
        endTime: '',
        ext: ''
      }
    }
  },
  methods: {
    init: function () {
      const contestId = this.$route.params.contestId
      getContestDetail(contestId).then(res => {
        console.log(res.data)
        this.model = res.data
      }).catch(_ => {
        console.log(_)
      })
    },
    handleRefresh: function () {
      this.init()
    }
  },
  watch: {
    '$route': function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  }
}
</script>

<style>

</style>
